import React, {Component} from 'react'
import {View, Text, StyleSheet, TouchableOpacity, TouchableNativeFeedback} from 'react-native'
import posed from 'react-native-pose' // react-native 动画库
import {deviceInfo} from "../../utils/deviceInfo";

const Scaler = posed.View({ // 定义点击缩放
    active: { scale: 1 },
    inactive: { scale: 0.9 }
})

const CustomTabbar = props => {

        const {
            renderIcon,
            getLabelText,
            activeTintColor,
            inactiveTintColor,
            onTabPress,
            onTabLongPress,
            getAccessibilityLabel,
            navigation
        } = props

        const { routes, index: activeRouteIndex } = navigation.state

        return (
            <Scaler style={styles.container}>
                {routes.map((route, routeIndex) => {
                    const isRouteActive = routeIndex === activeRouteIndex
                    const tintColor = isRouteActive ? activeTintColor : inactiveTintColor
                    console.log('route',route)
                    return (
                        <TouchableOpacity
                            key={routeIndex}
                            style={styles.tabButton}
                            onPress={() => {
                                onTabPress({ route })
                            }}
                            onLongPress={() => {
                                onTabLongPress({ route })
                            }}
                            accessibilityLabel={getAccessibilityLabel({ route })}
                        >
                            {route.key == 'HomeNative' ? ( // 对特殊图标进行特殊处理
                                <Scaler
                                    style={styles.scalerOnline}
                                    pose={isRouteActive ? 'active' : 'inactive'}
                                >
                                    {renderIcon({ route, focused: isRouteActive, tintColor })}
                                    <Text style={styles.iconText}>{getLabelText({ route })}</Text>
                                </Scaler>
                            ) : ( // 普通图标普通处理
                                <Scaler
                                    style={styles.scaler}
                                    pose={isRouteActive ? 'active' : 'inactive'}
                                >
                                    {renderIcon({ route, focused: isRouteActive, tintColor })}
                                    <Text style={styles.iconText}>{getLabelText({ route })}</Text>
                                </Scaler>
                            )}
                            {/*<Text style={Styles.iconText}>{getLabelText({ route })}</Text>*/}
                        </TouchableOpacity>
                    )
                })}
            </Scaler>
        )

}

export default CustomTabbar

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        height: deviceInfo.isIphoneX? 73:53,
        borderWidth: 1,
        borderRadius: 1,
        borderColor: '#EEEEEE',
        paddingBottom:deviceInfo.isIphoneX?20:undefined
        // shadowOffset: { width: 5, height: 10 },
        // shadowOpacity: 0.75,
        // elevation: 1
    },
    tabButton: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    spotLight: {
        // width: tabWidth,
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center'
    },
    spotLightInner: {
        width: 48,
        height: 48,
        backgroundColor: '#ee0000',
        borderRadius: 24
    },
    scaler: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    scalerOnline: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
    iconText: {
        fontSize: 12,
        lineHeight: 20
    }
})